{{=it.readFile(`elements/${it.title}/demo.html`).replace(/\{%PATH%\}/g, '..')}}

<script>
  (function() {
    // Loads a script asynchronously and returns a promise that resolves when
    // when the script has loaded.
    function loadScript(src) {
      return new Promise(resolve => {
        const s = document.createElement('script');
        s.onload = resolve;
        s.src = src;
        document.head.appendChild(s);
      });
    }

    // Sends a message to the parent window with the current size of document.
    // If this page is embedded in an iframe, the parent page has the choice
    // to adapt the size of the iframe to accommodate the contents.
    function sendSize() {
      if(window.parent === window) return;
      window.parent.postMessage(document.documentElement.getBoundingClientRect().height, '*');
    }

    // The parents window can query the iframe’s document size at any time by
    // sending any message.
    window.addEventListener('message', sendSize);

    window._loadJavaScript = _ => {
      let scriptsToLoad = [
        'https://cdn.rawgit.com/webcomponents/webcomponentsjs/d5b7ca65/webcomponents-sd-ce.js',
        '{{=it.title}}.js',
      ];

      // Load howto-label into every demo.
      if ('{{=it.title}}' !== 'howto-label') {
        scriptsToLoad.push('../howto-label/howto-label.js');
      }

      const whenScriptsLoaded = scriptsToLoad
        .reduce((chain, src) =>
          chain.then(_ => loadScript(src)),
          Promise.resolve()
        );
        return whenScriptsLoaded
          .then(_ => customElements.whenDefined('{{=it.title}}'))
          .then(_ => sendSize());
    };

    // If there’s a `nojs` in the URL’s query string, don’t load the elements,
    // somewhat emulating disabled JavaScript.
    if (!document.location.search.includes('nojs')) {
      _loadJavaScript();
    }

    // Hook up ResizeObserver for dynamic size adjustments
    loadScript('../scripts/resizeobserver.min.js')
      .then(_ => {
        const ResizeObserver =
          self.ResizeObserver || self.ResizeObserverPolyfill;
        const ro = new ResizeObserver(_ => sendSize());
        // One of them’s gotta be the right one, right?
        ro.observe(document.documentElement);
        ro.observe(document.body);
        ro.observe(document.scrollingElement);
      });

    // Send size after loading is done
    requestAnimationFrame(_ => sendSize());
  })();
</script>
</html>
